import React, {useEffect, useRef} from "react";
import "./index.css";
// 场景对象的创建与销毁
// 从全局窗口对象获取 ESObjectsManager 实例
// @ts-ignore
import {ESObjectsManager, ESSceneObject} from "earthsdk3";
import {ESUeViewer} from "earthsdk3-ue";
import {ESCesiumViewer} from "earthsdk3-cesium";
import {ESAlarm} from "earthsdk3";
// 创建 ESObjectsManager 实例
const objm = new ESObjectsManager(ESUeViewer, ESCesiumViewer);
const HowToCreatObj: React.FC = () => {
    const containerRef = useRef<HTMLDivElement>(null);
    // 使用 useRef 存储场景对象引用
    const sceneObjectsRef = useRef<{
        sceneObject1: ESSceneObject | undefined;
        sceneObject2: ESSceneObject | undefined;
        sceneObject3: ESSceneObject | undefined;
    }>({
        sceneObject1: undefined,
        sceneObject2: undefined,
        sceneObject3: undefined,
    });
    useEffect(() => {
        if (!containerRef.current) return;

        // 创建 Cesium 视口
        const viewer = objm.createCesiumViewer(containerRef.current);

        console.log(viewer);
        // 监听视口状态
        objm.viewerCreatedEvent.don(() => {
            // 视口创建完成，飞到初始视角位置
            viewer.flyIn(
                [116.40652135457904, 39.895916046805326, 943.015822904817],
                [346.3720690214717, -42.33771356206233, 0.0014172887026429263],
                3,
            );
        });

        // 通过json创建一个影像图层
        const imageryLayer = objm.createSceneObjectFromJson({
            id: "9812a65f-0de0-4f7b-b234-809c0c2fb8ef",
            type: "ESImageryLayer",
            maximumLevel: 18,
            url: "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
        });
        // 1.根据类（Class）创建一个Alarm对象
        const sceneObject1 = objm.createSceneObject(ESAlarm);
        sceneObject1!.position = [116.404, 39.904, 0];
        sceneObject1!.radius = 50;
        sceneObjectsRef.current.sceneObject1 = sceneObject1;
        // 2.根据类名（ClassStr）创建一个Alarm对象
        const sceneObject2 = objm.createSceneObject("ESAlarm");
        sceneObject2!.position = [116.408, 39.908, 0];
        sceneObject2!.radius = 100;
        sceneObjectsRef.current.sceneObject2 = sceneObject2;
        // 3.根据Json创建一个Alarm对象
        const sceneObject3 = objm.createSceneObjectFromJson({
            // id: "ce78c182-a45c-4f2a-963a-0691c0349058",
            id: "1",
            type: "ESAlarm",
            position: [116.408, 39.903, 0],
            name: "ESAlarm_9058",
            collision: false,
            allowPicking: true,
            radius: 200,
        });
        sceneObjectsRef.current.sceneObject3 = sceneObject3;
    }, []);
    const destoryAlarmAll = () => {
        if (sceneObjectsRef.current.sceneObject1) {
            objm.destroySceneObject(sceneObjectsRef.current.sceneObject1);
            sceneObjectsRef.current.sceneObject1 = undefined;
        }
        if (sceneObjectsRef.current.sceneObject2) {
            objm.destroySceneObject(sceneObjectsRef.current.sceneObject2);
            sceneObjectsRef.current.sceneObject2 = undefined;
        }
        if (sceneObjectsRef.current.sceneObject3) {
            objm.destroySceneObject(sceneObjectsRef.current.sceneObject3);
            sceneObjectsRef.current.sceneObject3 = undefined;
        }
    };
    return (
        <div className="box">
            <div className="container" ref={containerRef}></div>
            <button className="btn" onClick={destoryAlarmAll}>
                销毁所有的alarm对象
            </button>
        </div>
    );
};

export default HowToCreatObj;
